<template>
  <div class="roleauth">
    <gl-breadcrumb class="mb15"
                   text="角色管理,角色授权"></gl-breadcrumb>
    <div class="main">
      <div class="treDiv2">
        <el-tree :expand-on-click-node="false"
                 ref="tree1"
                 :data="tableData"
                 node-key="id"
                 default-expand-all>
          <span class="custom-tree-node flex"
                slot-scope="{ node, data }">
            <span class="name ml5">{{data.title}}</span>
            <span class="checkSpan">
              <el-checkbox-group v-model="checkList" >
                <el-checkbox :label="data.id">授权</el-checkbox>
              </el-checkbox-group>
            </span>
          </span>
        </el-tree>
      </div>
      <div class="mt20 btn tar">
        <el-button type="primary"
                   @click="addRoleAuth">保 存</el-button>
        <el-button @click="$router.go(-1)">取 消</el-button>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'Roleauth',
  components: {},
  data() {
    return {
      tableData: [], // 标签列表

      checkList: []
    }
  },
  computed: {},
  watch: {},
  methods: {
      // 保存
      addRoleAuth(){
         
          this.http.$post('system/api/role_edit',{
              id:this.$route.query.id,
              rules:this.checkList.join(',')
          }).then(res=>{
              this.$message.success('保存成功');
              setTimeout(()=>{
        		this.$router.go(-1)
        	},1000);
          }).catch(err=>{
              this.$message.error(err.msg)
          })
      },
    //   获取授权列表
    getAuth() {
      this.http
        .$post('system/api/auth_list_tree', {
          is_new: 1,
          pid: this.$route.query.id
        })
        .then(res => {
          this.tableData = res
          this.getDetail()
        })
        .catch(err => {
          this.$message.error(err.msg)
        })
    },
    //获取角色详情
    getDetail() {
      this.http
        .$post('system/api/role_info', {
          id: this.$route.query.id
        })
        .then(res => {
        //   console.log(res)
          if (res.rules != '') {
            this.checkList = res.rules.split(',').map(Number)
          }
        })
        .catch(err => {
          this.$message.error(err.msg)
        })
    },
  
  },
  created() {
    this.getAuth()
  },
  mounted() {}
}
</script>
<style lang='less' scoped>
/deep/ .el-tree-node__content {
  margin: 10px 0;
}
.roleauth {
  .main {

    background-color: #fff;
    box-sizing: border-box;
    padding: 20px;
    .btn {
      width: 720px;
    }
  }
}
.treDiv2 {
  width: 720px;
  height: 500px;
  overflow: auto;
  border: 1px solid #dcdcdc;
  .btnSpan {
    margin-left: 10px;
    em {
      font-style: normal;
      color: #0066ff;
      margin-right: 10px;
      &:hover {
        text-decoration: underline;
      }
    }
  }
}
.name {
  &.col409 {
    color: #409eff;
  }
  &.colf56 {
    color: #f56c6c;
  }
}
.checkSpan {
  position: absolute;
  right: 40px;
}
</style>